<script setup lang="ts">
import {
  Delete,
  Edit,
  Plus,
} from '@element-plus/icons-vue'
import type { Tree } from '../ViewTree/type'
import FormModal from './FormModal.vue'
import { useFormModal } from './useFormModal'
import { useIndicatorTable, usePointTree } from '.'
import type { IndicatorInfo } from '@/types'

import emitter from '@/bus'
import type IndicatorDataCurveModal from '@/components/IndicatorDataCurveModal/IndicatorDataCurveModal.vue'

defineSlots<{
  buttons: () => any
}>()
const pointData: Tree = reactive({
  id: 0,
  pointCode: '',
  pointFullName: '',
})
const [unitData, setUnitData] = useState<any[]>([])
const curveModalRef
  = ref<InstanceType<typeof IndicatorDataCurveModal>>()

const indicatorNumber = ref<string>()

const {
  vLoading,
  tableData,
  getTableData,
  deleteData,
} = useIndicatorTable(
  pointData,
  undefined,
  async (row: IndicatorInfo) => {
    indicatorNumber.value = row.indicatorNumber
    await nextTick()
    curveModalRef.value?.showModal?.()
  },
)

const formModalRef = ref<InstanceType<typeof FormModal>>()
const {
  formData,
  modalTitle,
  showEditModel,
  showAddModel,
} = useFormModal(formModalRef)

const isEdit = ref<boolean>(false)

const { treeData, getTreeData } = usePointTree()

async function handleSaveSuccess() {
  getTableData()
}

function clickAdd() {
  isEdit.value = false
  getTreeData()
  showAddModel(pointData.id)
}
function clickEdit(row: any) {
  isEdit.value = true
  getTreeData()
  showEditModel(row)
}

function emitterHandler(node: Tree) {
  Object.assign(pointData, node)
  getTableData()
}
async function getUnitData() {
  const { data: res }
    = await unitManagementApi.selectUnitList()
  setUnitData(
    res.map((item: any) => ({ id: uuid(), ...item })),
  )
}
onBeforeUnmount(() => {
  emitter.off('click:point-tree-node', emitterHandler)
})
onMounted(() => {
  getUnitData()
  emitter.on('click:point-tree-node', emitterHandler)
  getTableData()
})

defineExpose({
  pointData,
})
</script>

<template>
  <div class="view-manage">
    <div class="flex-incompressible flex">
      <ElButton
        plain
        type="success"
        :disabled="!$power('add') || !pointData.id"
        :icon="Plus"
        @click="clickAdd()"
      >
        新增
      </ElButton>
      <div class="fs-14 ml-4 flex flex-1 items-center">
        <span class="flex-shrink-0 text-gray dark:text-gray-4">选中的用能单元：</span>
        <span class="flex-1 text-truncate">{{ pointData.pointFullName }}</span>
        <span class="ml-auto flex-shrink-0 text-gray dark:text-gray-4">用能单元编号：</span>
        <span>{{ pointData.pointCode }}</span>
      </div>
    </div>
    <ElTable
      v-loading
      :data="tableData"
      align="center"
      show-overflow-tooltip
      style="width: 100%"
    >
      <ElTableColumn prop="indicatorName" label="指标名称" />
      <ElTableColumn
        prop="indicatorNumber"
        label="指标编码"
      >
        <template #default="{ row }">
          {{ row.indicatorNumber ?? '--' }}
        </template>
      </ElTableColumn>
      <ElTableColumn
        label="指标来源"
        :show-overflow-tooltip="false"
      >
        <template #default="{ row }">
          <ElTag v-if="row.source === 0" effect="light">
            手动录入
          </ElTag>
          <ElTag
            v-else-if="row.source === 1"
            type="danger"
            effect="light"
          >
            计量器具录入
          </ElTag>
          <ElTag v-else type="warning" effect="light">
            统计指标录入
          </ElTag>
        </template>
      </ElTableColumn>
      <ElTableColumn
        label="测点点位号"
        prop="indicatorCode"
      />
      <ElTableColumn prop="unit" label="指标单位" />
      <ElTableColumn
        fixed="right"
        label="操作"
        width="100"
      >
        <template #default="{ row }">
          <ElTooltip content="编辑" placement="top">
            <ElButton
              link
              type="primary"
              :icon="Edit"
              :disabled="!$power('edit')"
              @click="clickEdit(row)"
            />
          </ElTooltip>
          <ElDivider direction="vertical" />
          <ElTooltip content="删除" placement="top">
            <ElButton
              link
              type="danger"
              :icon="Delete"
              :disabled="!$power('delete')"
              @click="deleteData(row.id)"
            />
          </ElTooltip>
        </template>
      </ElTableColumn>
      <template #empty>
        <TableEmpty />
      </template>
    </ElTable>

    <!-- 编辑弹窗 -->
    <FormModal
      ref="formModalRef"
      v-model="formData"
      :point-tree-data="treeData"
      :point-info="pointData"
      :modal-title="modalTitle"
      :unit-data="unitData"
      @save-success="handleSaveSuccess"
    />
  </div>
</template>

<style scoped>
.el-tag {
  border: none;
  aspect-ratio: 1;
}
</style>
